import type {
  PlatformPageTypeValue,
  PlatformTypeValue,
  ThemeFutureOptions,
  ThemeType,
} from '../../../../types/interfaces'
import {
  loggerDeduplicator,
  PAGE_ELEMENTS,
} from '../../../../types/constants'
import { ThemeVarService } from '../theme_var/service'
import { BaseThemeService } from './base'

export abstract class TieBarThemeService extends BaseThemeService {
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  protected declare elements: any
  abstract wrapperSelector: string // 最外层增加包裹，提高特异性
  abstract name: string
  abstract platformPageType: PlatformPageTypeValue
  protected futureOptions: ThemeFutureOptions = {
    followButton: false,
    options: {
      followButtonClassName: undefined,
    },
  }

  protected constructor(platform: PlatformTypeValue) {
    super(platform)
    this.elements = PAGE_ELEMENTS[platform]
  }

  checkEnv(): void {
    super.checkEnv()
  }

  protected commonStyleVar(theme: ThemeType): string {
    return `
  /* 回答 */
  ${this.themeVarService.tieBar.answer.background}: ${this.getColorValue(theme, 'tiebarAnswerBg')};
  ${this.themeVarService.tieBar.comment.background}: ${this.getColorValue(theme, 'tiebarCommentBg')};
  ${this.futureOptions?.followButton && this.futureOptions?.options?.followButtonClassName
    ? `
  /* 关注按钮 */
  ${this.themeVarService.button.follow.bg}: ${this.getColorValue(theme, 'followButtonBg')};
  ${this.themeVarService.button.follow.bgHover}: ${this.getColorValue(theme, 'followButtonBgHover')};
  ${this.themeVarService.button.follow.text}: ${this.getColorValue(theme, 'followButtonText')};
  ${this.themeVarService.button.follow.textHover}: ${this.getColorValue(theme, 'followButtonTextHover')};
`
    : ''}
`
  }

  protected platformStyleVar(_theme: ThemeType): string {
    return ''
  }

  getThemeStyles(theme: ThemeType): string {
    if (!this.elements) {
      loggerDeduplicator.error(`[${this.name}] 页面元素配置为空，无法获取主题样式`)
      return ''
    }

    const styles = `
/* ****************************************************** */
/*                   ${theme.toUpperCase()} 主题样式                        */
/* ****************************************************** */
/* ====================================================== */
/* ================= 一、样式变量定义区 ================== */
/* ====================================================== */
${this.getStyleVar(theme)}
/* ====================================================== */
/* ================= 二、全局页面样式 ==================== */
/* ====================================================== */
${this.getPageStyles(theme)}
/* ====================================================== */
/* ================= 三、主容器样式 ====================== */
/* ====================================================== */
${this.wrapperSelector} {
/* ------------------------------------------------------ */
/* ----------------- 3.1 基础布局样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getBaseStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.2 核心视觉样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getMainStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.3 视觉适配样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getPatchedStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.4 问题修复样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getFixedStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.5 公共组件样式 -------------------- */
/* +++++++++++++++++ 3.5.1 其他样式 ++++++++++++++++++++++ */
  ${this.futureOptions?.followButton ? this.getFollowButtonStyles(theme) : ''}
}
`
    return this.normalizeCssIndentation(styles)
  }

  getBaseStyles(_theme: ThemeType): string {
    return ``
  }

  protected getMainStyles(_theme: ThemeType): string {
    return ''
  }

  protected getPageStyles(_theme: ThemeType): string {
    return ''
  }

  protected getPatchedStyles(_theme: ThemeType): string {
    return ''
  }

  protected getFixedStyles(_theme: ThemeType): string {
    return ''
  }

  protected getFollowButtonStyles(_theme: ThemeType): string {
    const followButtonClassName = this.futureOptions?.options?.followButtonClassName || undefined

    if (!followButtonClassName) {
      return ''
    }

    return `
.${followButtonClassName} {
  position: relative;
  border: none;
  border-radius: 6px;
  padding: 4px 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  background: var(${this.themeVarService.button.follow.bg}) !important;
  color: var(${this.themeVarService.button.follow.text}) !important;
  margin-left: auto !important;
  
  &:hover {
    background: var(${this.themeVarService.button.follow.bgHover}) !important;
    color: var(${this.themeVarService.button.follow.textHover}) !important;
  }
}
`
  }
}
